<template>
    <div class="phone">
        <div class="form">
            <div>
                <input type="text" placeholder="手机号码" v-model="userAcc" @input="changeBtn">
            </div>
            <div>
                <input type="password" placeholder="密码" v-model="userPass" @input="changeBtn">
            </div>
            <div class="agree">
                <input type="checkbox" ref="agree">
                <p>已阅读并同意 <span>服务条款</span> 和 <span>隐私政策</span></p>
            </div>
            <div>
                <button class="btn-login" ref="btnLogin" @click="addLoginEvent">登录</button>
            </div>
        </div>
        <p class="tip" @click="toHome">暂不登录，随便看看</p>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
    name:"Phone",
    data(){
        return{
            userAcc:"",
            userPass:""
        }
    },
    watch:{
        userAcc(newV){
            this.$store.state.inpAcc = newV
        },
        userPass(newV){
            this.$store.state.inpPass= newV
        }
    },
    created(){
        this.userAcc = this.inpAcc;
        this.userPass = this.inpPass;
    },
    methods:{
        ...mapMutations(["setUserToken"]),
         toHome(){
            this.$nextTick(()=>{
                if(!this.$refs.agree.checked){
                    alert("请阅读并同意服务条款和隐私政策！");
                    let timer = setInterval(()=>{
                        clearInterval(timer);
                        this.$refs.agree.checked=true;
                    },1000)
                }else{
                    this.$router.push({path:this.fromPagePath})
                }
            })
        },
        changeBtn(){
            if(this.userAcc.length>0 && this.userPass.length>0){
                this.$nextTick(()=>{
                    this.$refs.btnLogin.style["backgroundColor"]="rgb(245,192,90)"
                    this.$refs.btnLogin.style["pointerEvents"]="auto"
                })
            }else{
                this.$nextTick(()=>{
                    this.$refs.btnLogin.style["backgroundColor"]="rgb(208,208,208)"
                    this.$refs.btnLogin.style["pointerEvents"]="none"
                })

            }
        },
        addLoginEvent(){
             this.$nextTick(()=>{
                if(this.$refs.agree.checked){
                    if(this.userAcc == this.user.account && this.userPass == this.user.password){
                        localStorage.userToken = this.user.token;
                        this.setUserToken(this.user.token)
                        this.$router.push({path:"/home"})
                    }else{
                        alert("账号或密码错误！！！")
                    }
                }else{
                    alert("请阅读并同意服务条款和隐私政策！");
                }
            })
        }
    },
    computed:{
        ...mapState(["user","userToken","fromPagePath","inpAcc","inpPass"]),
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.form{
    text-align: center;
    input[type="text"],input[type="password"]{
        width: 100%;
        height: 50px;
        background-color: rgb(244,244,244);
        border-radius: 10px;
        padding-left: 15px;
        box-sizing: border-box;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .agree{
        input[type="checkbox"]{
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
        p{
            display: inline-block;
            font-size: 12px;
            vertical-align: middle;
            span{
                font-weight: bold;
                text-decoration: underline;
            }
        }
    }
    .btn-login{
        width: 70%;
        height: 50px;
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        background-color: rgb(208,208,208);
        margin-top: 20px;
        user-select: none;
        pointer-events:none;
    }
}
.tip{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 12px;
    color: $moreCol;
}
</style>